<template>
    <el-upload class="avatar-uploader" :action="uploadFileUrl" :on-progress="uploadVideoProcess"
        :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :show-file-list="false" :headers="headers">
        <div class="image-view" v-if="showVideoPath != '' && !videoFlag">
            <video ref="videoRef" class="video-avatar" controls="controls" :src="showVideoPath">您的浏览器不支持视频播放</video>
            <div class="upload-handle" @click.stop>
                <div class="handle-icon" @click="showImage()">
                    <el-icon>
                        <ZoomIn />
                    </el-icon>
                    <span>查看</span>
                </div>
                <div class="handle-icon" @click="deleteImg()">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    <span>删除</span>
                </div>
            </div>
        </div>
        <el-icon v-else-if="showVideoPath == '' && !videoFlag" class="el-icon-plus avatar-uploader-icon">
            <Plus />
        </el-icon>
        <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"
            style="margin-top: 7px"></el-progress>
    </el-upload>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { getToken } from '@/utils/auth.js'
import { ref, reactive, computed } from "vue";
const emits = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const showVideoPath = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emits('update:modelValue', val)
    }
})

const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件
const headers = ref({
    Authorization: `Bearer ${getToken()}`
})
const videoRef = ref()
const videoFlag = ref(false);
//是否显示进度条
const videoUploadPercent = ref(0);
//进度条的进度，
const isShowUploadVideo = ref(false);
//上传前回调
const beforeUploadVideo = (file) => {
    var fileSize = file.size / 1024 / 1024 < 1536; //控制大小  修改50的值即可
    if (
        [
            "video/mp4",
            "video/ogg",
            "video/flv",
            "video/avi",
            "video/wmv",
            "video/rmvb",
            "video/mov",
        ].indexOf(file.type) == -1 //控制格式
    ) {
        layer.msg("请上传正确的视频格式");
        return false;
    }
    if (!fileSize) {
        layer.msg("视频大小不能超过1.5GB");
        return false;
    }
    isShowUploadVideo.value = false;
};
//进度条
const uploadVideoProcess = (event, file, fileList) => {
    //注意在data中添加对应的变量名
    videoFlag.value = true;
    videoUploadPercent.value = file.percentage;
};
//上传成功回调
const handleVideoSuccess = (res, file) => {
    isShowUploadVideo.value = true;
    videoFlag.value = false;
    videoUploadPercent.value = 0;
    console.log(res);
    //后台上传数据
    if (res.code == 200) {
        showVideoPath.value = import.meta.env.VITE_APP_BASE_IMG_URL + res.url; //上传成功后端返回视频地址 回显
        emits('change', res)
    } else {
        ElMessage.warning("上传失败！")
        emits('change', {})
    }
};
const showImage = ()=>{
    console.log("🚀 ~ file: index.vue:103 ~ showImage ~ videoRef:", videoRef)
    videoRef.value.play()
}
const deleteImg = ()=>{
    showVideoPath.value = ''
    emits('change', {})
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    &:hover {
        border: 1px dashed #d9d9d9 !important;
        border-color: #409eff;
    }
}
.avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.image-view {
		width: 300px;
		height: 178px;
		border-radius: 6px;
		position: relative;
		overflow: hidden;
		&:hover {
			border-color: var(--el-color-primary);
			.upload-handle {
				opacity: 1;
			}
		}

		.upload-handle {
			position: absolute;
			top: 0;
			right: 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 178px;
			cursor: pointer;
			background: rgb(0 0 0 / 60%);
			opacity: 0;
			transition: var(--el-transition-duration-fast);
			.handle-icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 6%;
				color: aliceblue;

				.el-icon {
					margin-bottom: 40%;
					font-size: 130%;
					line-height: 130%;
				}

				span {
					font-size: 85%;
					line-height: 85%;
				}
			}
		}
	}
.video-avatar {
    width: 300px;
    height: 178px;
    display: block;
}
</style>
